<template>
	<view class="content">
		<view class="form">
			<view class="phone">
				<text class="icon tel"></text> <input type="text" placeholder="请输入手机号" v-model="user.mobile">
			</view>
			<view class="password ">
				<text class="icon lock"></text> <input type="text" password placeholder="请输入密码" v-model="user.password">
			</view>
			<view class="link">
				<navigator url="../reg/reg" open-type="navigate" class="reg">
					<text>还没账号</text>
				</navigator>
				<navigator url="../forget/forget" open-type="navigate" class="forget">
					<text>忘记密码</text>
				</navigator>
			</view>
			<button class="btn" @click="checkuser">登录</button>
		</view>
	</view>
</template>

<script>
	import users from '@/apis/users/index.js';
	import {
		ref,
		toRefs,
		reactive
	} from 'vue';
	export default {
		onLoad() {
			uni.setNavigationBarColor({
				backgroundColor: '#0f9209',
				frontColor: "#ffffff"
			})

		},
		setup() {
			const state = reactive({
				user: {
					mobile: "17762579921",
					password: "123456",
				}
			})

			const checkuser = () => {
				if (!state.user.mobile) {
					uni.showToast({
						title: "必须填写手机号"
					})
					return;
				}

				var reg1 = /^1[3|4|5|6|7|8]\d{9}$/;
				if (!reg1.test(state.user.mobile)) {
					uni.showToast({
						title: "手机格式不正确"
					})
					return;
				}

				users.user_login({
					username: state.user.mobile,
					password: state.user.password
				}).then(res => {
					console.log(res)
					if (res.data.code == 0) {
						uni.setStorageSync("token", {
							token: res.data.token,
							uid: res.data.uid,
							nickname:res.data.userInfo.nickname
						});
						uni.showToast({
							title: res.data.msg,

							success() {
								setTimeout(() => {
									uni.navigateBack();
								}, 3000);
							}
						})
					}
				})


			}

			return {
				...toRefs(state),
				checkuser
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {}

	.form {

		view {
			display: flex;
			height: 80rpx;
			border-bottom: 1px solid #ccc;
			padding: 20rpx 0px;

			text {
				flex: 1;
			}

			.tel {
				background-image: url('../../static/shouji.png');
				background-size: 50rpx;
				background-repeat: no-repeat;
				background-position: 35rpx 20rpx;
			}

			.lock {
				background-image: url('../../static/mima.png');
				background-size: 50rpx;
				background-repeat: no-repeat;
				background-position: 35rpx 20rpx;
			}

			input {
				flex: 8;
				padding: 20rpx;
			}
		}


		.link {

			height: 50rpx;
			line-height: 50rpx;

			a {
				flex: 1;
				font-size: $uni-font-size-sm;
				padding: 20rpx;
			}

			.reg {
				text-align: left;
			}

			.forget {
				text-align: right;
			}
		}

		button {
			background-color: $ltt-primary-color;
			color: #ffffff;
		}
	}
</style>
